<template>
  <div class="shop"><!-- 商铺信息组件 -->
       
    <div class="shop_1_1"><!-- 商铺LOGO -->
      <img :src="shop.shopLogo" alt="">
      <span>{{shop.name}}</span>
    </div>

    <div class="shop_2">
      <div class="shop_2_1">
        <div class="shop_2_1_1">
          <div>{{xiaoliang}}</div>
          <span>总销量</span>
        </div>
        <div class="shop_2_1_2">
          <div>{{shop.cGoods}}</div>
          <span>全部宝贝</span>
        </div>
      </div>
      <div class="shop_2_2">
        <div v-for="(item,index) in shop.score" :key="index">
          {{item.name}}&ensp;
          <span class="shop_2_2_1" :class="{active:item.isBetter}">{{item.score}}</span>&ensp;
          <span class="shop_2_2_2" :class="{active_1:item.isBetter}">{{item.isBetter? '高' : '低'}}</span>
        </div>
      </div>
    </div>
    <div class="enter-shop-wrap">
			<div class="enter-shop">进店逛逛</div>
		</div>
  </div>
</template>

<script>
export default {
  props:{
    shop:{
      type:Object,
    }
  },
  computed:{
    xiaoliang(){
      if(this.shop.cSells>10000){
        return (this.shop.cSells/10000).toFixed(1)+'万'
      }else{
        return this.shop.sCells
      }

    }
  }
}
</script>

<style scoped>
.shop{
  padding-top: 20px;
}
.shop_1_1{
  position: relative;
  overflow: hidden;
}
.shop_1_1 img{
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-left: 8px;
}
.shop_1_1 span{
  position: absolute;
  top: 50%;
  left: 65px;
  transform: translateY(-50%);
}

.shop_2{
  display: flex;
  padding: 30px;
}
.shop_2_1{
  flex: 1;
  text-align: center;
  border-right: solid 1px #000;
  padding-top:20px ;
}
.shop_2_1_1{
  float: left;
  width: 50%;
}
.shop_2_1_1 div{
  font-size: 19px;
}
.shop_2_1_1 span{
  font-size: 10px;
}
.shop_2_1_2{
  float: left;
  width: 50%;
}
.shop_2_1_2 div{
  font-size: 19px;
}
.shop_2_1_2 span{
  font-size: 10px;
}

.shop_2_2{
  flex: 1;
  margin-left: 21px;
}
.shop_2_2_1{
  display: inline-block;
	width: 30px;
	color: #006666;
}

.shop_2_2_2{
  background-color: #006666;
  color: #fff;
  padding: 1px 4px;
  font-size: 12px;
}
.active{
	color: #880000;
}
.active_1{
  background-color: #880000;
  color: rgb(255, 255, 255);
}
.enter-shop-wrap{
  text-align: center;
}
.enter-shop{
  	display: inline-block;
		background-color: #f2f2f2;
		font-size: 12px;
		padding: 6px 30px;
		border-radius: 100px;
		margin: 10px;
    background-image: linear-gradient(-45deg,rgb(223, 117, 117),pink,rgba(157, 183, 223, 1));
}
.enter-shop:active{
  color: rgb(114, 52, 52);
}

</style>